<template>
	<view class="min100" style="padding-bottom:240rpx;">
		<view class="">
			<!-- 头部 -->
			<view class="topWrap white">
				<img :src="info.image" class="collectImg">
				<!-- <image src="../../static/preview.png" class="preImg" @click="preShow=true"></image> -->
				<view class="topContent plr-30">
					<view class="size-34 mb-20" style="color: #000;font-weight: bold;">
						{{info.name}}
					</view>
					<!-- <view class="flex flex-start size-22">
						<view class="tipsLeft mr-16 text-center  ptb-7 radius-6" style="width:128rpx;color: #fff;">
							{{info.goods_category_name}}
						</view>
						<view class="tipsRight ptb-7 red text-center radius-6" style="width:128rpx;">
							{{info.label}}
						</view>
					</view> -->
				</view>
			</view>
			
			
			<view class="radius-20 bg plr-30 ptb-30" v-if="info.is_custom==1">
				<view class="mb-30 size-30 gray">
					缤纷合成(请选择{{info.num}}个随机藏品)
				</view>
				<empty v-if="info.goods_custom.length==0"></empty>
				<view class="" v-else>
					<view class="flex gray-2 flex-between hecheng" 
						v-for="(item,index) in info.goods_custom" :key="index">
						<view class="flex" style="align-items: flex-start;width: 100%;">
							<image style="width:140rpx;height:140rpx;" :src="item.image" mode="">
							</image>
							<view class="ml-20" style="flex: 1;position: relative;">
								<view class="mt-20 mb-10 bold gray">
									{{item.name}}
								</view>
								<view class="sift" @click="choose(item)">
									<view class="numBox">{{item.cptitle?item.cptitle:'请添加原料'}}</view>
									<image src="../../static/chip/shaixuan.png" mode="widthFix"></image>
								</view>
							<!-- 	<view>
									价值：<text class="red">￥{{item.price}}</text>
								</view> -->
							</view>
						</view>
						<!-- <view class="red" v-if="item.users_number>=item.number">
							({{item.users_number}}/{{item.number}})
						</view> -->
					<!-- 	<view class="gray-2" v-else="">
							({{item.users_number}}/{{item.number}})
						</view> -->
					</view>
				</view>
			</view>
			<u-popup v-model="show" @close="close" mode="bottom" border-radius="20" height="760rpx" closeable>
				<view class="p10">
					<view class="flex1" style="align-items: center;">
						<view class="" style="width: 100px;height: 100px;background-color: '';border-radius: 15px;">
							<image class="photo" :src="image" mode="" style="border-radius: 15px;"></image>
						</view>
						<view class="ml-20 ">
							<view class="fw size-32">
								{{name}}
							</view>
							<view class="mt-60">
								{{tcount}}个
							</view>
						</view>
					</view>
					<view class="mt-20">
						默认按编号排序
					</view>
					<view class="root" style="display: flex;flex-wrap: wrap;width:100%;justify-content: space-around;">
						<view :class="item.active == true?'popActive popup_price mt-20':'popup_price mt-20'" style="" @click="gohomeDetails(item)" v-for="item in myCollectprice">
							<view class="text-right" style="height: 32rpx;margin-top: 10rpx;">
								<view class="blue" v-if="item.status==0">铸造中</view>
								<view class="green" v-if="item.status==1">持有中</view>
								<view class="colorRed" v-if="item.status==2">挂售中</view>
								<view class="blue" v-if="item.status==3">交易中</view>
								<view class="blue" v-if="item.status==4">已出售</view>
								<view class="blue" v-if="item.status==5">已转赠</view>
								<view class="blue" v-if="item.status==6">创造失败</view>
							</view>
							<view class="text-center popup_price_2 fw">
								￥{{item.price}}
							</view>
							<view class="text-center popup_price_2 fw mt-5">
								{{item.goods_num}}
							</view>
							
						</view>
					</view>
			
				</view>
			</u-popup>
			<!-- 介绍 -->
			<view class="radius-20 bg mt-30 plr-30 ptb-30">
				<view class="mb-30 size-30 gray">
					作品故事
				</view>
				<view class="gray infoWrap" v-html="info.content">

				</view>
			</view>
		</view>
		<view class="btmWrap flex flex-between pb-60 pt-20 plr-30">
			<u-button type="primary" @click="toCompose(1)" style="color: #fff!important;" :disabled="btnDisabled" hover-class="none"
				v-if="listLength==info.num">立即合成</u-button>
				<!-- <u-button type="primary" @click="toCompose(2)" style="color: #fff!important;" :disabled="btnDisabled" hover-class="none"
					v-if="listLength==info.num">条件二合成</u-button> -->
			<u-button type="primary" :disabled="true" hover-class="none" v-else>材料不足</u-button>
			<!-- <u-button type="primary" :disabled="true" hover-class="none" v-if="info.is_forge==1 && listLength!==info.num">藏品不足</u-button> -->
		</view>
		<!-- 成功 -->
		<u-popup v-model="successShow" mode="center" class="bg" border-radius="30" width="500rpx">
			<view class="successWrap text-center size-24 pb-50">
				<image :src="successConfig.image" class="getImg radius-20"></image>
				<view class="mt-30 mb-20 white">
					{{successConfig.name}}
				</view>
				<!-- <view class="gray-2">
					价值：<text class="red">￥{{successConfig.price}}</text>
				</view> -->
			</view>
		</u-popup>
		<!-- 失败 -->
		<u-popup v-model="failShow" mode="center" class="bg" border-radius="30" width="500rpx">
			<view class="failWrap text-center size-24 white pb-50">
				很遗憾，祝您下次好运！
			</view>
		</u-popup>
		<!-- 预览图片 -->
		<u-popup v-model="preShow" mode='center' border-radius='20'>
			<view>
				<img :src="info.image" class="collectPreImg">
			</view>
		</u-popup>
		<!-- 动图 -->
		<u-mask :show="gifShow" @click="gifShow = false">
			<view class="openGif">
				<image class="gifImg" :src="gifUrl"></image>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import empty from "../../components/empty.vue"
	export default {
		components: {
			empty
		},
		data() {
			return {
				show: false,
				btnDisabled: false,
				gifUrl: "../../static/stuff.gif",
				gifShow: false, //盲盒动图
				preShow: false,
				successConfig: {},
				failShow: false,
				successShow: false,
				id: '',
				info: {
					goods: [],
					goods_custom: []
				},
				tcount: '',
				name: '',
				image: "",
				myCollectprice: [],
				// num:0,
				cptitle:[],
				index:'',
				listLength:0,
				users_goods_ids:[]
			}
		},
		onLoad(options) {
			this.id = options.id;
			// this.init()
		},
		onShow() {
			this.info=[];
			this.listLength=0;
			this.init()
			this.users_goods_ids=[]

			
		},
		onHide() {
			this.successShow = false;
			this.failShow = false;
		},
		methods: {
			init(){
				this.$http('api/forge_bin_fen/forgeDetail', {
					id: this.id
				}).then(res => {
					this.info = res;
					uni.setNavigationBarTitle({
						title: this.info.name
					})
				})
			},
			close() {
				this.show = false
				let listLength=[]
				for(let i=0;i<this.info.goods_custom.length;i++){
					// console.log(this.info.goods_custom.length)
					// let listLength=[]
					
					if(this.info.goods_custom[i].cptitle){
						// console.log(this.info.goods_custom[i].cptitle.length)
						listLength.push(this.info.goods_custom[i].cptitle.length)
						// listLength+=this.info.goods_custom[i].cptitle.length
					}
					// console.log(listLength)
					var sum=0
					for(let i=0;i<listLength.length;i++){
						
						sum+=listLength[i]
						// console.log(sum)
						this.listLength=sum
					}
					console.log(this.listLength)
				}
				for(let i=0;i<this.myCollectprice.length;i++){
					// console.log(this.myCollectprice[i].active)
					if(this.myCollectprice[i].active){
						// console.log('true:'+this.myCollectprice[i].id)
							if(this.users_goods_ids.indexOf(this.myCollectprice[i].id) === -1){
								this.users_goods_ids.push(this.myCollectprice[i].id)
							}
					}else{
						// console.log('false:'+this.myCollectprice[i].id)
						if(this.users_goods_ids.indexOf(this.myCollectprice[i].id)!==-1){
							// console.log(this.users_goods_ids.indexOf(this.myCollectprice[i].id))
							let num=this.users_goods_ids.indexOf(this.myCollectprice[i].id)
							this.users_goods_ids.splice(num,1)
							// console.log(this.users_goods_ids)
							
							
							
						}
						console.log(this.users_goods_ids)
						// this.users_goods_ids.pop(this.myCollectprice[i].id)
					}
					
					
				}
				
					console.log(this.listLength)
					if(this.listLength>this.info.num){
						uni.showToast({
							icon:"none",
							title:'请选择'+this.info.num+'个随机藏品'
						})
					}
				
			},
			gohomeDetails(item) {
				console.log(item)
				if(item.status==0){
					uni.showToast({
						icon:"none",
						title:'藏品铸造中,无法参与'
					})
				}
				// console.log(item.active)
				if(item.active==undefined || item.active==false){
					
					item['active'] = true
					this.myCollectprice=JSON.parse(JSON.stringify(this.myCollectprice))
					// console.log('新增',item.id)
					if(item.status!==0){
						this.cptitle.push(item.goods_num)
						
						this.info.goods_custom[this.index]['cptitle']=this.cptitle
					}
					// console.log(item.id)
				}else{
					item['active'] = false
					this.myCollectprice=JSON.parse(JSON.stringify(this.myCollectprice))
					
					for(let i=0;i<this.myCollectprice.length;i++){
						// console.log(this.myCollectprice[i].goods_num,this.cptitle)
						// console.log(this.cptitle.indexOf(this.myCollectprice[i].goods_num))
						console.log()
						if(this.myCollectprice[i].active == false){
							if(this.cptitle.indexOf(this.myCollectprice[i].goods_num) !== -1){
								// console.log(this.cptitle.indexOf(this.myCollectprice[i].goods_num))
								
								let num=this.cptitle.indexOf(this.myCollectprice[i].goods_num)
								console.log(num)
								this.cptitle.splice(num,1)
							}
						}
					
						
					}
					// console.log(item)
					// this.cptitle.pop(item.goods_num)
					this.info.goods_custom[this.index].cptitle=this.cptitle
				}
				// console.log(this.users_goods_ids)
				
			},
			choose(item){
				// console.log(item)
				// console.log(this.users_goods_ids)
				this.users_goods_ids=JSON.parse(JSON.stringify(this.users_goods_ids))
				console.log(this.users_goods_ids)
				this.image=item.image
				this.name=item.name
				this.show = true
				// console.log(this.cptitle)
				this.cptitle=[]
				
				for(let i=0;i<this.myCollectprice.length;i++){
					// this.cptitle=[]
					// console.log(this.myCollectprice[i])
					
					// if(this.info.goods_custom[i].cptitle.indexOf(this.myCollectprice[i].goods_num)!==-1){
					// 	// console.log(this.users_goods_ids.indexOf(this.myCollectprice[i].id))
					// 	let num=this.users_goods_ids.indexOf(this.myCollectprice[i].id)
					// 	this.users_goods_ids.splice(num,1)
					// 	// console.log(this.users_goods_ids)
						
						
						
					// }
					
					
					// if(this.myCollectprice[i].active==true){
					// 	console.log(this.myCollectprice[i].goods_num)
					// 	this.info.goods_custom[i].cptitle.push(this.myCollectprice[i].goods_num)
					// }
				}
				
				
				this.index = this.info.goods_custom.indexOf(item)
				// console.log(this.index)
				this.$http('api/orders/usersGoodsList', {
					id: item.goods_id,
					
				}).then(res => {
					// console.log(res)
					this.myCollectprice = res
					this.tcount=res.length
					
					console.log(this.users_goods_ids)
					for(let i=0;i<this.myCollectprice.length;i++){
						// this.users_goods_ids.pop(this.myCollectprice[i].id)
						// console.log(this.myCollectprice[i].id)
						if(this.users_goods_ids.indexOf(this.myCollectprice[i].id) !== -1){
							console.log(this.myCollectprice[i].id)
							this.myCollectprice[i]['active'] = true
						}
						// this.users_goods_ids.pop(this.myCollectprice[i].id)
					}
					// console.log(this.users_goods_ids)
				})
			},
			// 合成
			toCompose(i) {
				// this.btnDisabled = true;
				
				// setTimeout(() => {
				// 	uni.navigateTo({
				// 		url: "./syntheticRecord"
				// 	})
				// }, 2000)
				
				this.$http('api/forge_bin_fen/customForge', {
					id: this.id,
					users_goods_ids: this.users_goods_ids
				}).then(res => {
					this.gifShow = true;
					this.btnDisabled = false;
					setTimeout(() => {
						this.gifShow = false;
						this.gifUrl = `../../static/stuff.gif?${new Date().getTime()}`
						if (res.is_success == 1) {
							uni.showToast({
								title: "合成成功!",
								icon: "none"
							})
							this.successShow = true;
							this.successConfig = res;
						} else {
							uni.showToast({
								title: "合成失败!",
								icon: "none"
							})
							this.failShow = true;
						}
						setTimeout(() => {
							uni.navigateTo({
								url: "./syntheticRecord"
							})
						}, 2000)
					}, 4000)
				})
				
			},
			// 复制
			copyAddress(val) {
				// #ifdef APP-PLUS
				uni.setClipboardData({
					data: val,
					success: function() {
						uni.hideToast()
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: '复制成功',
									icon: 'none'
								})
							}
						});
					}
				});
				// #endif
				// #ifdef H5
				let that = this;
				this.$copyText(val).then(function(e) {
					uni.showToast({
						title: "复制成功!",
						icon: "none"
					})
				}, function(e) {
					uni.showToast({
						title: "复制失败!",
						icon: "none"
					})
				})
				// #endif
			},
		}
	}
</script>

<style lang="less" scoped>
	page{
		background-color: #fff;
	}
	.hecheng{
		border: 1rpx solid #F5F5F5;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}
	.popup_price {
		background: #F5F5F5;
		width: 220rpx;
		height: 140rpx;
		border-radius: 32rpx;
	}
	.popActive{
		border: 1rpx solid green;
		background: #fff;
	}
	.blue,.green,.colorRed{
		color: #2979FF;
		font-size: 18rpx;
		margin-right: 10rpx;
	}
	.green{
		color: green;
	}
	.colorRed{
		color: red;
	}
	.sift{
		width: 340rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 35rpx;
		// border: 1rpx solid #999;
		position: absolute;
		right: 0;
		padding: 0 40rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
		color: #999;
		// bottom: 20rpx;
		.numBox{
			display: flex;
			width: 340rpx;
			height: 70rpx;
			flex-wrap: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			text-align: left;
			font-size: 26rpx;
		}
		image{
			width: 60rpx;
			height: 60rpx;
		}
	}
	.userImg {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}


	.btmWrap {
		position: fixed;
		z-index: 10;
		width: 100%;
		bottom: 0;
		background: #fff;
	}

	.tipsLeft {
		background: #44ACFF;
		color: #2f2f2e;
	}

	.collectImg {
		width: 100%;
		display: block;
		margin: 0 auto;
		height: auto;
		position: relative;
	}

	.tipsRight {
		background: rgba(239, 170, 28, .3);
	}


	.topWrap {
		// background: url(../../static/detailsBg1.png) 0 0 no-repeat;
		background-size: 100% 100%;
		width: 100%;
		// height: 926rpx;
		padding-bottom: 100rpx;
		position: relative;
	}

	.infoWrap {

		::v-deep  img {
			width: 100% !important;
			height: auto;
		}
	}

	::v-deep  .u-btn--primary--disabled {
		background: #DEE4E8 !important;
	}

	.successWrap {
		background: url(../../static/success.png) 0 0 no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 622rpx;
		padding-top: 234rpx;
	}

	.failWrap {
		background: url(../../static/fail.png) 0 0 no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 412rpx;
		padding-top: 278rpx;
	}

	.getImg {
		width: 240rpx;
		height: 240rpx;
		background: #999;
	}

	::v-deep  .u-mode-center-box {
		background-color: transparent;
	}

	.openGif {
		width: 620rpx;
		height: 620rpx;
		margin: 400rpx auto 0;

		.gifImg {
			width: 620rpx;
			height: 620rpx;
		}
	}
	.topContent {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0rpx;
		z-index: 10;
		width: 100%;
		// text-align: center;
	}
</style>
